<template>
    <el-card shadow="hover" :body-style="{ padding: '20px' }">
        <el-table border stripe :data="skuList.records">
            <el-table-column label="序号" type="index" width="80px" align="center">
            </el-table-column>
            <el-table-column label="名称" prop="skuName">
            </el-table-column>
            <el-table-column label="描述" prop="skuDesc">
            </el-table-column>
            <el-table-column label="默认图片">
                <template #="{ row, $index }">
                    <img v-if="row.skuDefaultImg" :src="row.skuDefaultImg" alt="" style="width: 100px; height: 100px" />
                    <img v-else src="./1.png" alt="" style="width: 100px; height: 100px; border-radius: 50%" />
                </template>
            </el-table-column>
            <el-table-column label="重量(千克)" prop="weight">
            </el-table-column>
            <el-table-column label="价格(元)" prop="price">
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template #="{ row, $index }" >
                    <el-button
                      :type="row.isSale == 0 ? 'success' : 'info'"
                      :icon="row.isSale == 0 ? Top : Bottom"
                      size="small"
                      @click="changeSale(row)"
                    ></el-button>
                    <el-button
                      type="primary"
                      size="small"
                      :icon="Edit"
                      @click="ElMessage({ type: 'warning', message: '开发中...' })"
                    ></el-button>
                    <el-button
                      type="info"
                      size="small"
                      :icon="InfoFilled"
                      @click="openSku(row)"
                    ></el-button>
                    <el-button type="danger" size="small" :icon="Delete" @click="delSku(row)"></el-button>
                  </template>
            </el-table-column>
        </el-table>
        <el-pagination @current-change="getskuList" @size-change="sizeHandler" v-model:current-page="currentPage"
            :page-sizes="[3,5,7]" v-model:page-size="pageSize" layout=" prev, pager, next, jumper,->, sizes,total"
            :total="skuList.total" background :pager-count="7">
        </el-pagination>
        
  <!-- 抽屉 
    v-model:控制抽屉显示与隐藏
  -->
  <el-drawer v-model="drawer">
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right">名称:</el-col>
      <el-col :span="18"
        >{{skuInfoList.skuName}}</el-col
      >
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right">描述:</el-col>
      <el-col :span="18"
        >{{skuInfoList.skuDesc}}</el-col
      >
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right; line-height: 42px"
        >重量:</el-col
      >
      <el-col :span="18"
        >{{skuInfoList.weight}}</el-col
      >
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right; line-height: 42px"
        >平台属性:</el-col
      >
      <el-col :span="18" style="line-height: 30px">
        <el-tag
          type="success"
          v-for="(item,index ) in skuInfoList.skuAttrValueList"
          :key="item.id"
          style="margin-left: 3px"
          >{{ item.valueName}}</el-tag
        >
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="6" style="text-align: right; line-height: 42px"
        >销售属性:</el-col
      >
      <el-col :span="18" style="line-height: 30px">
        <el-tag
          type="success"
          v-for="(item , index) in skuInfoList.skuSaleAttrValueList"
          :key="item.id"
          style="margin-left: 3px"
          >{{ item.saleAttrValueName }}</el-tag
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col>商品图片:</el-col>
    </el-row>
    <el-row>
      <el-col>
        <!-- 轮播图 -->
        <el-carousel indicator-position="outside" style="height:400px">
          <el-carousel-item v-for="item in skuInfoList.skuImageList" :key="item">
           <img :src="item.imgUrl" style="width:100%,heigth:300px">
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </el-drawer>
    </el-card>

</template>

<script setup lang="ts">
    import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  UploadFilled,
  Top,
  Bottom,
  InfoFilled,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { reqSkuList,reqSkuInfo ,reqSkuDel} from '@/api/product/sku/sku'
import { ref, onMounted, reactive } from 'vue'
// 收集sku数据
let skuList = ref<any>({
    total: '',
    records: []
})
let skuInfoList=reactive<any>({
  // skuName:'',
  // skuDesc:'',
  // weight:'',
  // skuImageList:[],
  // skuAttrValueList:[],

})
let drawer=ref<boolean>(false)
let currentPage = ref<number>(1)
let pageSize = ref<number>(3)
onMounted(() => {
    getskuList(1)
})
const getskuList = async (limit: number = 1) => {
    currentPage.value = limit
    let result = await reqSkuList(currentPage.value, pageSize.value)
    skuList.value.total = result.total
    skuList.value.records = result.records
    //   console.log(skuList)
}
const sizeHandler = (page: number) => {
    pageSize.value = page
    getskuList()
}
const changeSale=(row:any)=>{
    row.isSale= !row.isSale
}
// 抽屉
const openSku=async(row:any)=>{
  drawer.value=true
  let result= await reqSkuInfo(row.id)
  console.log(result)
  Object.assign(skuInfoList,result)
}
// 删除按钮
const delSku=async(sku:any)=>{
 try {
  await reqSkuDel(sku.id)
 ElMessage({
  type:'success',
  message:'删除成功'
 })
 getskuList()
 } catch (error) {
  ElMessage({
  type:'error',
  message:'删除失败'
 })
 }
}

</script>

<style scoped>
/**深度选择器:能干什么  深度选择器有哪些  什么情况下使用**/
/**  >>>  /deep/ ::v-deep   回来咱们会花1一个小时讲解它***/
>>>.el-carousel__button{
    width:10px;
    height: 10px;
    background:yellowgreen;
    border-radius: 50%;
 }
</style>